<template>
    <div>
        <!-- 顶部导航开始 -->
        <mt-header title="学前端，到学问">
            <div slot="right" v-if="this.$store.state.islogin==0" class="shortcut">
                <router-link to="/register">注册</router-link>
                <router-link to="/login">登录</router-link>
            </div>
            <div slot="right" v-else class="shortcut">欢迎：{{this.$store.state.user.username}}</div>
        </mt-header>
        <!-- 顶部导航结束 -->
        <!-- 主要区域开始 -->
        <div class="main">
            <!-- 顶部选项卡开始 -->
            <mt-navbar v-model="active">
                <mt-tab-item :id="item.id.toString()" v-for="(item,index) of category" :key="index">{{item.category_name}}
                </mt-tab-item>
            </mt-navbar>
            <!-- 顶部选项卡结束 -->
            <!-- 面板区域开始 -->
            <mt-tab-container infinite-scroll-distance="20" v-infinite-scroll="loadMore" infinite-scroll-disabled="disabled" infinite-scroll-immediate-check="true">
                <mt-tab-container-item>
                    <!-- 单一文章信息开始 -->
                <div class="articleItem" v-for="(article,index) of articles" :key="index">
                    <router-link :to="`/article/${article.id}`">
                        <!-- 文章标题开始 -->
                        <div class="articleItem-header">
                            {{article.subject}}
                        </div>
                        <!-- 文章标题结束 -->
                        <!-- 文章图文信息开始 -->
                        <div class="articleItem-wrapper">
                            <!-- 文章图像开始  -->
                            <div class="articleImg" v-if="article.image!=null">
                                <img v-lazy="article.image"/>
                            </div>
                            <!-- 文章图像结束 -->
                            <!-- 文章简介开始 -->
                            <div class="articleDes">
                                {{article.description}}
                            </div>
                            <!-- 文章简介结束 -->
                        </div>
                        <!-- 文章图文信息结束 -->
                    </router-link>
                </div>
                        <!-- 单一文章信息结束 -->
                        </mt-tab-container-item>
                        
                    </mt-tab-container>
                    
                    <!-- 面板区域结束 -->
                    <!-- 底线开始 -->
                    <div>这是我的底线</div>
                </div>
                <!-- 主要区域结束 -->
                <!-- 底部导航开始 -->
            <mt-tabbar fixed v-model="current">
                <mt-tab-item id="home">
                    <img src="../assets/home_enable.png" alt="" slot="icon" v-if="current=='home'">
                    <img src="../assets/home_disable.png" alt="" slot="icon" v-else>
                    首页
                </mt-tab-item>
                <mt-tab-item id="me">
                    <img src="../assets/me_enable.png" alt="" slot="icon" v-if="current=='me'">
                    <img src="../assets/me_disable.png" alt="" slot="icon" v-else>
                    我的
                </mt-tab-item>
            </mt-tabbar>
        <!-- 底部导航结束 -->

    </div>
</template>
<style scoped>
    .shortcut a{
        color:#fff;
        margin-left: 10px;
    }
    .articleItem {
    padding: 10px 0;
    margin: 0 10px;
    border-bottom: 1px solid #999;
    }
    .articleItem-header {
    font-weight: 600;
    font-size: 17px;
    color: #1a1a1a;
    line-height: 22px;
    }
    .articleItem-wrapper {
    display: flex;
    align-items: center;
    padding-top: 10px;
    width: 100%;
    }
    .articleImg {
    margin-right: 15px;
    }
    .articleImg img {
    width: 112px;
    height: 74px;
    border-radius: 5px;
    }
    .articleDes {
    height: 65px;
    font-size: 15px;
    overflow: hidden;
    font-weight: 400;
    text-overflow: ellipsis;
    line-height: 21px;
    letter-spacing: normal;
    color: #444;
    }
    .main{
        margin-bottom: 55px;
    }
</style>
<script>
export default {
    data(){
        return {
            //默认被选定的顶部选项卡
            active:"1",
            //默认被选定的底部选项卡
            current:"home",
            // 存储服务器返回分类数据
            category:[],
            // 存储服务器返回文章数据
            articles:[],
            //存储页码初始值
            page:1,
            //标识是否暂时禁用向下滚动
            disabled:false,
            // 存储服务器返回的总页数
            pagecount:0
        }
    },
    methods:{
        //加载文章数据的函数
        /*
        *获取指定分类下指定页码的文章列表数据
        *@param cid int,分类ID
        *@param page int,页码

        *@return void
         */
        loadData(cid,page){
            //暂时禁用向下滚动
            this.disabled=true;
            // 显示加载提示框
            this.$indicator.open({
                text:"加载中...",
                spinnerType:"fading-circle"
            });
            //发送异步请求
            let object={
                 cid:cid,
                page:page
            }
            this.axios.get('/articles?'+this.qs.stringify(object)).then(res=>{
            //将服务器返回的页数总数赋值给pagecount变量
            this.pagecount=res.data.pagecount;
            //将服务器返回的数据赋值给变量--result（对象数组）
            let results=res.data.results;
            //通过foreach语句对于results变量进行遍历操作，然后实现图片的图片的动态加载
            results.forEach(item=>{//item值组成数组的每一个成员，在本案例中也就是一个对象
            //如果文章有缩略图则动态加载
            if(item.image!=null){
                //属性重新赋值--将图片动态加载后重新赋值给item的image属性
                item.image=require('../assets/images/articles/'+item.image);
            }
            this.articles.push(item);
                });
                this.$indicator.close();
                this.disabled=false;
            })
        },
        loadMore(){
            //页码累加
            this.page++;
            //当当前页码在总数范围内时获取文章列表数据
            if(this.page<=this.pagecount){
                this.loadData(this.active,this.page);
            }
        }
    },
    watch:{
        //监听active变量，以保证在切换顶部选项卡时要向WEB服务器发送变量
        active(value){
            //清空articles数组
            this.articles=[];
            //将页面修改为1
            this.page=1;
            this.loadData(value,this.page);
        }
    },
    mounted(){
        /*
        let object={
            cid:5,
            pis:9,
            mid:8,
            uid:33
        };
        console.log(this.qs.stringify(object));
        let str='a=1&b=2&c=3&d=4';
        console.log(this.qs.parse(str));
        */
        // 发送HTTP请求以获取期望的文章分类数据
        this.axios.get("/category").then(res=>{
            //将服务器返回的数据赋予category变量
            this.category=res.data.results;
        });
        //获取文章列表数据
        this.loadData(this.active,1)
    }
}
</script>